<template>
  <div class="helpcenter">
    <van-nav-bar
      title="帮助中心"
      left-text
      left-arrow
      style-left="{color:#eee}"
      @click-left="$router.go(-1)"
    >
      <van-icon name="service-o" slot />
    </van-nav-bar>
    <div class="problem">
      <figure>
        <van-icon name="question-o" />
        <figcaption>常见问题 ></figcaption>
      </figure>
      <div class="list">
        <p>鲜花3小时送达</p>
        <p>提前半天预定</p>
        <p>异地送花</p>
        <p>鲜花免费配送</p>
      </div>
    </div>
    <div class="problem">
      <figure>
         <van-icon name="orders-o"></van-icon>
        <figcaption>订单帮助 ></figcaption>
      </figure>
      <div class="list">
        <p>订单查收</p>
        <p>取消订单说明</p>
        <p>订单补交货款</p>
        <p>取消订单手续费</p>
      </div>
    </div>
    <div class="problem">
      <figure>
       
       <van-icon name="service-o" />
        <figcaption>售后服务 ></figcaption>
      </figure>
      <div class="list">
        <p>投诉说明</p>
        <p>礼劵说明</p>
        <p>鲜花售后服务</p>
        <p>绿植售后服务</p>
      </div>
    </div>
    <div class="problem">
      <figure>
        <van-icon name="gift-card-o"></van-icon>
        <figcaption>礼品卡 ></figcaption>
      </figure>
      <div class="list">
        <p>使用规则</p>
        <p>使用方法</p>
        <p>查询余额</p>
        <p></p>
      </div>
    </div>
    <div class="problem">
      <figure>
        <van-icon name="logistics" />
        <figcaption>配送说明 ></figcaption>
      </figure>
      <div class="list">
        <p>配送说明</p>
        <p>配送范围</p>
        <p>配送费用查询</p>
        <p>港澳台配送说明</p>
      </div>
    </div>
    <div class="problem">
      <figure>
        <van-icon name="volume-o"/>
        <figcaption>服务说明 ></figcaption>
      </figure>
      <div class="list">
        <p>服务说明</p>
        <p>购物流程</p>
        <p>隐私条款</p>
        <p></p>
      </div>
    </div>
  <div class="foot-nav">
    
    <p class="box-text"><van-icon style="padding-right:0.1rem" name="service-o" @click="$router.push({name:'Servicemain'})"/>在线客服<span>（8:30-21:00）</span></p>
    <van-icon name="arrow" />

  </div>

</div>
  
</template>


<style scoped>
.van-icon-arrow-left {
  color: #666;
}
.problem {
  height: 1.61rem;
  /* border:1px solid #ff0; */
  margin-top: 0.05rem;
  display:flex;
  margin-bottom:0.05rem; 
}
.problem figure{
  width:1.2rem;
  /* border:1px solid #ff0; */
  display: flex;
  flex-direction: column;
  background:#fff;
  justify-content: center;
  align-items: center
}
.problem figure figcaption {
  font-size: 0.16rem;
  margin-top:0.1rem
}
.helpcenter {
  
  background:#eee;
}
.list {
  font-size: 0.15rem;
  width:80%;
  display:flex;
  flex-wrap: wrap;
  /* border: 1px solid #f0f */
}
.list p{width:50%;border:1px solid #eee;border-top:none;border-bottom:none;margin-bottom:0.01rem; background:#fff;
box-sizing:border-box;height:0.8rem;display:flex;justify-content: center;align-items: center}
.foot-nav{
  height:0.7rem;
  background:#fff;
  font-size:0.18rem;
  display:flex;
  align-items: center;
  
  justify-content:space-between;
  padding:0 0.3rem;
  position: relative;
}
.foot-nav p{
  display: flex;
  justify-content: center;
}
.foot-nav span{
  color:rgba(153,153,153,0.5);
}
</style>